<template>
    <div>
        <!-- 账号安全（查看信息，修改密码。。。） -->
        <div class="row">
            <div class="col-md-4">
                <div>
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>个人信息</span>
                            <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
                        </div>
                        <div class="user-box">
                           <div class="user-profile">
                               <div class="box-center">
                                    <el-avatar :size="100" :src="userImg"></el-avatar>
                               </div>
                               <div class="box-center">
                                   <div class="user-name">轩忆</div>
                                   <div>管理员</div>
                               </div>
                            </div>
                           <div class="user-body">
                               <div class="user-body-head">
                                   <i class="el-icon-tickets"></i>
                                   <span>个人信息</span>
                               </div>
                               <div class="user-body-info">
                                   <ul>
                                       <li>
                                           <div>
                                               <i class="el-icon-user"></i>
                                               <span> 用户名称：轩忆</span>
                                           </div>
                                       </li>
                                       <li>
                                           <div>
                                               <i class="el-icon-phone-outline"></i>
                                               <span> 手机号码：15917253686</span>
                                           </div>
                                       </li>
                                       <li>
                                           <div>
                                               <i class="el-icon-message"></i>
                                               <span> 用户邮箱：1120760701@qq.com</span>
                                           </div>
                                       </li>
                                       <li>
                                           <div>
                                               <i class="el-icon-help"></i>
                                               <span> 所属角色：管理员</span>
                                           </div>
                                       </li>
                                       <li>
                                           <div>
                                               <i class="el-icon-date"></i>
                                               <span> 创建日期：2020-08-16 08:35:09</span>
                                           </div>
                                       </li>
                                   </ul>
                               </div>
                           </div>
                        </div>
                    </el-card>
                </div>
            </div>
            <div class="col-md-8" style="padding-left:0;">
                <div>
                    <el-card style="min-height:500px;" >
                        <el-tabs v-model="activeName" >
                            <el-tab-pane label="项目进度" name="first">
                                 <el-timeline :reverse="reverse">
                                    <el-timeline-item
                                    v-for="(activity, index) in activities"
                                    :key="index"
                                    :timestamp="activity.timestamp">
                                    {{activity.content}}
                                    </el-timeline-item>
                                </el-timeline>
                            </el-tab-pane>
                            <el-tab-pane label="账号信息" name="second">
                                <div style="padding: 15px 0 0 25px;">
                                    <common-form ref="userFormRef" :lableWidth="lableWidth"
                                    :form="userForm" :formLabel="userFormLabel" >
                                        <div style="padding-left:82px;">
                                            <el-button type="primary" icon="el-icon-circle-check" size="mini" >保存</el-button>
                                            <el-button type="danger" icon="el-icon-circle-close" size="mini" >重置</el-button>
                                        </div>
                                    </common-form>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="个人密码" name="third">
                                <div style="padding: 15px 0px 0 25px;">
                                    <common-form ref="passFormRef" :lableWidth="lableWidth"
                                    :form="passForm" :formLabel="passFormLabel" >
                                        <div style="padding-left:82px;">
                                            <el-button type="primary" icon="el-icon-circle-check" size="mini" >保存</el-button>
                                            <el-button type="danger" icon="el-icon-circle-close" size="mini" >重置</el-button>
                                        </div>
                                    </common-form>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CommonForm from '../../components/CommonForm'
export default {
  components: {
    CommonForm
  },
  data () {
    return {
      userImg: require('../../assets/images/profile.jpg'),
      // 表单字段宽度
      lableWidth: '80',
      activeName: 'first',
      // 账号信息表单
      userForm: {
        name: '',
        phone: '',
        email: '',
        sex: ''
      },
      // 搜索表单label
      userFormLabel: [
        {
          model: 'name',
          label: '用户昵称：',
          type: 'input'
        },
        {
          model: 'phone',
          label: '手机号码：',
          type: 'input'
        },
        {
          model: 'email',
          label: '电子邮箱：',
          type: 'input'
        },
        {
          model: 'sex',
          label: '用户性别：',
          type: 'radio',
          rads: [
            {
              value: 1,
              label: '男'
            },
            {
              value: 2,
              label: '女'
            }
          ]
        }
      ],
      // 密码表单
      passForm: {
        oldPass: '',
        newPass: '',
        rePass: ''
      },
      // 密码表单label
      passFormLabel: [
        {
          model: 'oldPass',
          label: '旧密码：',
          type: 'input'
        },
        {
          model: 'newPass',
          label: '新密码：',
          type: 'input'
        },
        {
          model: 'rePass',
          label: '确密码：',
          type: 'input'
        }
      ],
      // 时间线
      reverse: false,
      activities: [
        {
          content: '网站体验版完成，准备答辩。。。',
          timestamp: '2020-09-02'
        },
        {
          content: '网站问题修改样式，挺高用户体验',
          timestamp: '2020-09-01'
        }, {
          content: '将网站部署到阿里服务器、提供网站给测试工程师测试',
          timestamp: '2020-08-30'
        }, {
          content: '前后端开发正式开始',
          timestamp: '2020-08-27'
        }, {
          content: '个人项目基础知识学习、初步确定了小组成员分工',
          timestamp: '2020-08-25'
        }, {
          content: '实训选题、数据库结构讨论，确定了前后端分离的开发模式',
          timestamp: '2020-08-24'
        }
      ]
    }
  },
  methods: {
    // 获取用户信息
    getUserDetail () {
      this.userForm.name = '轩忆'
      this.userForm.phone = '15917253686'
      this.userForm.email = '1120760701@qq.com'
      this.userForm.sex = 1
    }
  },
  created () {
    this.getUserDetail()
  }
}
</script>

<style lang="scss" scoped>
.user-box{
    color: #606266;
    font-size: 14px;
    .user-profile{
        .box-center{
            padding-top: 10px;
            margin: 0 auto;
            display: table;
            .user-name{
                color: #303133;
                font-size: 16px;
                font-weight: 700;
                text-align: center;
                margin-bottom: 3px;
            }
        }
    }
    .user-body{
        margin-top: 20px;
        color: #606266;
        .user-body-head{
            border-bottom: 1px solid #dfe6ec;
            padding-bottom: 10px;
            margin-bottom: 10px;
            font-weight: 700;
        }
        .user-body-info{
            ul{
                li{
                    line-height: 30px;
                }
            }
        }
    }
}
/deep/.el-input {
    width: 80%;
}
/deep/.el-timeline{
    padding: 20px 0 0 10px;
    width: 95%;
}
.el-avatar{
  border:1px solid #eee;
}
.el-timeline{
    padding-top: 5%;
}
</style>
